<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org">
<head th:replace="_header_include::frag(~{::title},~{::style},~{})">
    <title>后台管理系统</title>
    <style>
        .el-select{
		    width:350px;
		}
    </style>
</head>
<body>
<div id="userManage" class="userManage mainPadding" style="display: none;">  
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>业务设置</el-breadcrumb-item>
        <el-breadcrumb-item>商务布局管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row class="mainWhiteBg">
        <div class="inforTitle">修改商务布局管理</div>
        <el-row :gutter="20">
            <el-form :model="form" :rules="rules" ref="form" class="mainWhitePadding">
            	<el-row>
                    <el-col :span="12">
                        <el-form-item label="操作内容：" :label-width="formLabelWidth1" >
    					   <el-checkbox   v-model="bussinessGroupchecked"  label="商务小组"   @change="checkIsShow(1)"></el-checkbox>
    					   <el-checkbox v-model="projectchecked" label="签约项目" @change="checkIsShow(2)"></el-checkbox>
    					   <el-checkbox v-model="provincechecked" label="区域" @change="checkIsShow(3)"></el-checkbox>
    					   <el-checkbox v-model="dxchecked" label="电销组" @change="checkIsShow(4)"></el-checkbox>
                        </el-form-item>
                    </el-col>
                </el-row>
             	<el-row v-show="businessShow">
                    <el-col :span="12">
                        <el-form-item label="商务小组：" :label-width="formLabelWidth1" prop="businessGroupId">
                            <el-select filterable v-model="form.businessGroupId" placeholder="请选择"  @change="setProject">
                                <el-option
                                    v-for="item in swList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="业务线：" :label-width="formLabelWidth" prop="businessLine" v-if="0">
                            <el-input v-model="form.businessLine" placeholder="业务线"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            	<el-row v-show="projectShow">
                    <el-col :span="12">
                        <el-form-item label="签约项目：" :label-width="formLabelWidth1" prop="projectIds">
                            <el-select multiple filterable v-model="form.projectIds" placeholder="请选择">
                                <el-option
                                    v-for="item in projectList"
                                    :key="item.id"
                                    :label="item.projectName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            	<el-row v-show="provinceShow">
                    <el-col :span="12">
                        <el-form-item label="区域（省）：" :label-width="formLabelWidth1" prop="provincesIds">
                            <el-select filterable v-model="form.provincesIds" @change="selectAll" multiple placeholder="请选择">
                                <el-option
                                    v-for="item in proviceslist"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            	<el-row v-show="telemarketingTeamShow">
                    <el-col :span="12">
                        <el-form-item label="电销组：" :label-width="formLabelWidth1" prop="telemarketingTeamIds">
                            <el-select filterable multiple v-model="form.telemarketingTeamIds" placeholder="请选择" @change="changeDx">
                                <el-option
                                    v-for="item in dxList"
                                     :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="电销组业务线：" :label-width="formLabelWidth" prop="dxBusinessLine" v-if="0">
                            <el-input v-model="form.dxBusinessLine" placeholder="业务线"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            
              
                <el-row>
                    <el-form-item class="f-tac">
                    	<el-button type="success" @click="showdetail">预览</el-button>
                        <el-button type="primary" @click="showTips">确定</el-button>
                        <a href="/invitearea/inviteAreaList"><el-button type="info" style="margin-left: 10px;">取消</el-button></a>
                       
                    </el-form-item>
                </el-row>
            </el-form>
        </el-row>
    </el-row>

    <el-dialog title="信息详情"  :visible.sync="dialogFormVisible"  width="50%">
        <el-form>
             <el-row>
            <el-table 
                ref="multipleTable"
                tooltip-effect="dark"
                empty-text="无数据"
                style="width: 100%"
                border
                :data="dataTable"  >
                <el-table-column align="center" prop="businessGroup" label="商务小组"></el-table-column>
                <el-table-column align="center" prop="provinces" label="区域"></el-table-column>
                <el-table-column align="center" prop="telemarketingTeam" label="电销组"></el-table-column>
                <el-table-column align="center" prop="projects" label="签约项目"></el-table-column>
            </el-table>
        </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="确定要执行批量操作？" :visible.sync="submitdialogFormVisible" >
       
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" :disabled="btnDisabled" @click="onSubmit('form')">确 定</el-button>
            <el-button type="info" @click="submitdialogFormVisible =false">取 消</el-button>
        </div>
    </el-dialog>
</div>
<!--添加弹窗-->



<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
</body>
<script th:inline="javascript">

	var swList=[[${swList}]];
	var dxList=[[${dxList}]];
	var inviteAreaDTOs = [[${inviteAreaDTOs}]]
	var proviceslist=[[${proviceslist}]];
	var projectList=[[${projectList}]];
	var isshowBusinessGroup = [[${isshowBusinessGroup}]];
	var isshowTelemarketingTeam = [[${isshowTelemarketingTeam}]];
	var isshowprovince = [[${isshowprovince}]];
	var isshowproject = [[${isshowproject}]];
	var checkbusinessGroupId = [[${checkbusinessGroupId}]];
	var checkTelemarketingTeam = [[${checkTelemarketingTeam}]];
	var checkProject = [[${checkProject}]];
	var checkProvince = [[${checkProvince}]];
  var businessLine=[[${businessLine}]];//规则信息
	var ids = [[${ids}]];
    var addUserVm= new Vue({
        el: '#userManage',
        data: function() {
            return {
				btnDisabled: false,
            	inviteAreaDTOs:"",
            	submitdialogFormVisible:false,
            	add:"",
            	dataTable:[],
            	checkList:[],
            	businessShow:false,
            	dialogFormVisible: false,
            	telemarketingTeamShow:false,
            	provinceShow:false,
            	projectShow:false,
            	bussinessGroupchecked:false,
            	dxchecked:false,
            	provincechecked:false,
            	projectchecked:false,
              businessLine:'',
                tableRadio:'',
                dialogFormChooseRole: false,
                dialogFormChooseOrg: false,
                swList:swList,
                dxList:dxList,
                projectList:projectList,
                proviceslist:proviceslist,
                form: {
                	businessGroupId: checkbusinessGroupId,
                	provincesIds: checkProvince,
                	telemarketingTeamIds: checkTelemarketingTeam,
                	projectIds:checkProject,
                  businessLine:businessLine
                },
                rules: {
                	businessGroupId: [
                      { required: true, message: '请选择商务小组', trigger: 'change' },
                    ],
                    projectIds: [
                      { required: true, message: '请选择项目', trigger: 'change' },
                    ],
                    provincesIds: [
                      { required: true, message: '请选择省份', trigger: 'change' },
                    ],
                    telemarketingTeamIds: [
                      { required: true, message: '请选择电销组', trigger: 'change' },
                    ]
                    
                  },
                formLabelWidth: '150px',
                formLabelWidth1: '120px',
                methodOptions: [{
                    value: 1,
                    label: 'POST'
                }, {
                    value: 2,
                    label: 'GET'
                }],
                oldOptions:[]
            }        	  
        },
        methods: {
            setProject(value){
                var businessLine ="";
                var groupName = "";
                for(var i = 0 ; i < swList.length ; i++){
                    if(swList[i].id == value){
                        groupName = swList[i].name;
                        addUserVm.form.businessLine = swList[i].businessLine;
                        businessLine = swList[i].businessLine;
                        break;
                    }
                }
              //根据所选商务小组所属业务线查询电销组
              console.log("businessLine: "+businessLine);
              addUserVm.form.telemarketingTeamIds=[];
              if(businessLine != null){
                var busParam ={};
                busParam.businessLine = businessLine;
                axios.post("/invitearea/getDxOrganizations", busParam).then(function (response) {
                  var data = response.data;
                  addUserVm.dxList = data.data;
                  console.log(data.data);
                }).catch(function (error) {console.log(error);});
              }
              if(!this.projectShow){
                return false;
              }
                var param = {};
                param.businessGroup = groupName;
                axios.post("/invitearea/InviteProjects", param).then(function (response) {
                    var data = response.data;
                    if(data&&data.length>0){
                        var arr = [];
                        for(var i = 0 ; i < data.length ; i++){
                            arr.push(data[i].id)
                        }
                        addUserVm.form.projectIds = arr;
                    }
                }).catch(function (error) {console.log(error);});
            },
          changeDx(value){
              debugger;
            for(var i = 0 ; i < addUserVm.dxList.length ; i++){
              if(addUserVm.dxList[i].id == value){
                debugger;
                addUserVm.form.dxBusinessLine = addUserVm.dxList[i].businessLine;
                break;
              }
            }
          },
        	checkIsShow(val){
        		if(val==1 ){
        			if(isshowBusinessGroup ==0){
        				if(this.bussinessGroupchecked){
        					this.businessShow = true;
        				}else{
        					this.businessShow = false;
        				}
        				
        			}else{
        				this.open("商务小组需为相同数据，请重新选择信息！");
        				this.bussinessGroupchecked = false;
        			}
        		}else if(val== 2){
        			if(isshowproject ==0){
        				if(this.projectchecked){
        					this.projectShow = true;
        				}else{
        					this.projectShow = false;
        				}
        				
        			}else{
        				this.open("签约项目需为相同数据，请重新选择信息！");
        				addUserVm.projectchecked = false;
        			}
        		}else if(val== 3){
        			if(isshowprovince ==0){
        				if(this.provincechecked){
        					this.provinceShow = true;
        				}else{
        					this.provinceShow = false;
        				}
        				
        			}else{
        				this.open("区域需为相同数据，请重新选择信息！");
        				addUserVm.provincechecked = false;
        			}
        		}else if(val== 4){
        			if(isshowTelemarketingTeam ==0){
        				if(this.dxchecked){
        					this.telemarketingTeamShow = true;
        				}else{
        					this.telemarketingTeamShow = false;
        				}
        			}else{
        				addUserVm.dxchecked = false;
        				this.open("电销组需为相同数据，请重新选择信息！");
        				
        			}
        		}
    			
        	},
        	showdetail(){
        		if(isshowTelemarketingTeam ==1 && isshowBusinessGroup==1 && isshowproject==1 && isshowprovince==1){
        			this.open("所有数据项必须相同，请重新选择信息！");
        			return ;
        		}
				this.dialogFormVisible=true;
				var str = [];
			     var formData = addUserVm.form;
   	             var param={};
       	          let obj = {};
                  obj = this.swList.find((item)=>{
                      return item.id === formData.businessGroupId;
                  });


                  var businessGroupName  = "";
                  var telemarketingTeamName = "";
       	          var projectstrs ="";
       	          var projectsName =""
       	          var provincestrs ="";
                  var procinceNames ="";
       	          if(isshowBusinessGroup==0){
       	        	businessGroupName  = obj.name;
            	  }
	       	      if(isshowTelemarketingTeam ==0){
                      var teamNames ="";
                      var teamIds ="";
                      for ( var i = 0; i <formData.telemarketingTeamIds.length; i++){
                          for(var j = 0 ; j < this.dxList.length ; j++){
                              if(formData.telemarketingTeamIds[i] ==this.dxList[j].id){
                                  if(teamIds !=""){
                                      teamIds = teamIds+","+formData.telemarketingTeamIds[i];
                                  }else{
                                      teamIds = formData.telemarketingTeamIds[i];
                                  }
                                  if(teamNames !=""){
                                      teamNames = teamNames+","+ this.dxList[j].name;
                                  }else{
                                      teamNames = this.dxList[j].name;
                                  }
                                  break;
                              }
                          }
                      }
                      telemarketingTeamName = teamNames;
	       		  }
	       	   	  if(isshowprovince==0){
		       	   	 	for ( var i = 0; i <formData.provincesIds.length; i++){
	               	  		for(var j =0;j<this.proviceslist.length;j++){
	               		  		if(formData.provincesIds[i] ==this.proviceslist[j].id){
	               			  		if(procinceNames ==""){
	               				  		procinceNames = this.proviceslist[j].name
	               			  		}else{
	               				  		procinceNames =procinceNames+"," +this.proviceslist[j].name
	               			  		}
	               		  		}
	               	  	}
	               	   if(provincestrs !=""){
	               		   provincestrs = provincestrs+","+formData.provincesIds[i];
	               	   }else{
	               		   provincestrs = formData.provincesIds[i];
	               	   }
               		}
	       		  }
	       		  if(isshowproject==0){
	       			 for ( var i = 0; i <formData.projectIds.length; i++){
	                	  for(var j =0;j<this.projectList.length;j++){
	                		  if(formData.projectIds[i] ==this.projectList[j].id){
	                			  if(projectsName ==""){
	                				  projectsName = this.projectList[j].projectName
	                			  }else{
	                				  projectsName =projectsName+"," +this.projectList[j].projectName
	                			  }
	                		  }
	                	  }
	                	   if(projectstrs !=""){
	                		   projectstrs = projectstrs+","+formData.projectIds[i];
	                	   }else{
	                		   projectstrs = formData.projectIds[i];
	                	   }
	                	}
	       		  }
                 
                 
                 
                
       	        var idList = ids.split(",");
			
	        	for (var i = 0; i < idList.length; i++) {
	        		for(var j = 0; j < inviteAreaDTOs.length; j++){
	        			if(idList[i] ==inviteAreaDTOs[j].id){
	        				if(isshowTelemarketingTeam ==1){
		        				telemarketingTeamName = inviteAreaDTOs[j].telemarketingTeam;
	                		}
	        				if(isshowBusinessGroup ==1){
	        					businessGroupName = inviteAreaDTOs[j].businessGroup;
	        				}
	        				if(isshowproject ==1){
	        					projectsName ="";
	        					var proIds = inviteAreaDTOs[j].projectIds.split(",");
	        					for ( var k = 0; k<proIds.length; k++){
	        	                	  for(var m =0;m<this.projectList.length;m++){
	        	                		  if(proIds[k] ==this.projectList[m].id){
	        	                  			  if(projectsName ==""){
	        	                  				  projectsName = this.projectList[m].projectName
	        	                  			  }else{
	        	                  				  projectsName =projectsName+"," +this.projectList[m].projectName
	        	                  			  }
	        	                  		  }
	        	                	  }
	        					}
	        					
	                  	  }
	       				 if(isshowprovince ==1){
	       					procinceNames = inviteAreaDTOs[j].provinces;
	       				 }
	        			}
	        			
      				}
      				
    				 var invitearea = {
   	        	    	 businessGroup: businessGroupName,
   	        	    	 provinces: procinceNames,
   	        	    	 telemarketingTeam: telemarketingTeamName,
   	        	    	 projects: projectsName,
    	        	 };
    	        	str.push(invitearea);
	        	}
	        	    
        	     console.info(invitearea);
        	     this.dataTable = str;
	        	
        	},
        	saveOneDictionary(){
        		
        	},
            onSubmit(formName) {
            	 this.$refs[formName].validate((valid) => {
          	       if (valid) {
       	             var formData = addUserVm.form;
       	             var param={};
	       	          let obj = {};
	                  let telemarketingTeamobj = {};

	                  if(isshowBusinessGroup ==0){
	                	  param.businessGroupId= formData.businessGroupId;
	                	  obj = this.swList.find((item)=>{
		                      return item.id === param.businessGroupId;
		                  });
	                	  param.businessGroup = obj.name;
	                  }
	                  if(isshowTelemarketingTeam ==0){
                          var teamNames ="";
                          var teamIds ="";
                          for ( var i = 0; i <formData.telemarketingTeamIds.length; i++){
                              for(var j = 0 ; j < this.dxList.length ; j++){
                                  if(formData.telemarketingTeamIds[i] ==this.dxList[j].id){
                                      if(teamIds !=""){
                                          teamIds = teamIds+","+formData.telemarketingTeamIds[i];
                                      }else{
                                          teamIds = formData.telemarketingTeamIds[i];
                                      }
                                      if(teamNames !=""){
                                          teamNames = teamNames+","+ this.dxList[i].name;
                                      }else{
                                          teamNames = this.dxList[i].name;
                                      }
                                  }
                              }
                          }
                          param.telemarketingTeams = teamNames;
                          param.telemarketingTeamIds = teamIds;
	                  }
	                  
	       	          var projectstrs ="";
		       	       if(isshowproject==0){
		       	    	for ( var i = 0; i <formData.projectIds.length; i++){
		                	   if(projectstrs !=""){
		                		   projectstrs = projectstrs+","+formData.projectIds[i];
		                	   }else{
		                		   projectstrs = formData.projectIds[i];
		                	   }
		                	} 
		       	       }
	                  var provincestrs ="";
	                  var procinceNames ="";
	                  if(isshowprovince ==0){
	                	  for ( var i = 0; i <formData.provincesIds.length; i++){
		                	  for(var j =0;j<this.proviceslist.length;j++){
		                		  if(formData.provincesIds[i] ==this.proviceslist[j].id){
		                			  if(procinceNames ==""){
		                				  if(formData.provincesIds[i] !=0){
		                					  procinceNames = this.proviceslist[j].name
		                				  }
		                			  }else{
		                				  if(formData.provincesIds[i] !=0){
		                					  procinceNames =procinceNames+"," +this.proviceslist[j].name
		                				  }
		                			  }
		                		  }
		                	  }
		                	  if(provincestrs !=""){
		                		   if(formData.provincesIds[i] !=0){
		                			   provincestrs = provincestrs+","+formData.provincesIds[i];
		                		   }
		                		   
		                	   }else{
		                		   if(formData.provincesIds[i] !=0){
		                			   provincestrs = formData.provincesIds[i];
		                		   }
		                		   
		                	   }
		                	}
	                  }
	                  
	                  param.projectIds= projectstrs;
	       	          param.provincesIds = provincestrs;
	       	          param.provinces = procinceNames;
	       	          param.ids =ids;
	       	          param.businessLine = addUserVm.form.businessLine;
	       	       	  let provinceobj = {};
	                  provinceobj = this.proviceslist.find((item)=>{
	                     // return (','+provincestrs+',').includes('选项0')item.id === param.telemarketingTeamId;
	                  });
					    // console.info(param);
						addUserVm.btnDisabled = true; 
	      	            axios.post("/invitearea/updateInviteArea", param)
	      	            .then(function (response) {
	      	            	console.info(response);
	      	            	var data =response.data;
	      	            	if(data.code!="0"){
	      	            		addUserVm.$message(data.msg);
								addUserVm.btnDisabled = false; 
	      	            	}else{
								addUserVm.btnDisabled = false; 
	      	                	document.location.href='/invitearea/inviteAreaList';
	      	            	}
	      	            })
	      	            .catch(function (error) {
							console.log(error);
							addUserVm.btnDisabled = false; 
	      	            });
      	             
         	          } else {
         	        	console.log('数据未通过校验！');
         	            return false;
         	          }
         	        });
            },
            open(message){
            	this.$message(message);
            },
            selectAll(val) {
            	const allValues = []
            	var isall = 0;
            	var values = val;
            	values = ","+values+",";
            	// 保留所有值
            	for (const item of this.proviceslist) {
            	allValues.push(item.id)
            	}
            	// 用来储存上一次的值，可以进行对比
            	const oldVal = this.oldOptions.length === 1 ? this.oldOptions[0] : []

            	console.log(this.oldOptions.length)
            	console.log(val)
            	console.log(oldVal)
            	var flag = false;
            	var oldflag = false
            	for(var i =0;i<val.length;i++){
            		if(val[i] ==0){
            			flag = true;
            		}
            	}
            	for(var i =0;i<oldVal.length;i++){
            		if(oldVal[i] ==0){
            			oldflag = true;
            		}
            	}
            	// 若是全部选择
            	if (flag) this.form.provincesIds = allValues

            	// 取消全部选中 上次有 当前没有 表示取消全选
            	if (oldflag && !flag) this.form.provincesIds = []

            	// 点击非全部选中 需要排除全部选中 以及 当前点击的选项
            	// 新老数据都有全部选中
            	if (oldflag && flag) {
            	const index = 0;
            	val.splice(index, 1) // 排除全选选项
            	this.form.provincesIds = val
            	}

            	// 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
            	if (!oldflag && !flag) {
            	console.log(11)
            	if (val.length === allValues.length - 1) this.form.provincesIds = val
            	}

            	// 储存当前最后的结果 作为下次的老数据
            	this.oldOptions[0] = this.form.provincesIds
            	}
            	  
            
            ,
            showTips(){
            	if(isshowTelemarketingTeam ==1 && isshowBusinessGroup==1 && isshowproject==1 && isshowprovince==1){
        			this.open("所有数据项必须相同，请重新选择信息！");
        			return ;
        		}
              if(addUserVm.form.telemarketingTeamIds.length == 0){
                this.$message({
                  message: '请选择电销组',
                  type: 'warning'
                });
                return ;
              }
              if(addUserVm.form.businessLine != addUserVm.form.dxBusinessLine){
                this.$message({
                  message: '请选择与商务组同业务线的电销组！',
                  type: 'warning'
                });
                return ;
              }
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        this.submitdialogFormVisible = true;
                    }
                });
            }
        },
        created(){
        },//created方法 结束
        mounted(){
            document.getElementById('userManage').style.display = 'block';
          this.form.businessLine=businessLine;
          this.form.dxBusinessLine=businessLine;
        }
    })
</script>
</html>